<template>
    <div class="page">
        <span v-for="n in total" v-bind:key="n" @click="changePageFn(n)">
            {{n}}
        </span>
    </div> 
</template>
<script>
export default {
    name: 'qfui-page',
    props: {
        total: {  
            type: Number
        }
    },

    methods: {
        changePageFn(n) {
            this.$emit('changePageFn', n)
        }
    }
}
</script>
<style scoped>
.page {
    width: 300px;
    height: 50px;
}

.page span {
    width: 10px;
    height: 10px;
    padding: 10px;
    background: black;
    color: #fff;
}
.page span:hover{color:yellow;cursor:pointer;}
</style>